<template>
  <view class="form-container">
    <u-form :model="form" :rules="rules" ref="form">
      <Sign>4-1.家庭日常消费支出</Sign>
      <u-form-item prop="dailyConsumption.spendProject" borderBottom>
        <view class="title">主要消费支出项目（多选）：</view>
        <u-checkbox-group v-model="form.dailyConsumption.spendProject" placement="column">
          <u-checkbox
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in radioGroupList.spendProject_list"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-checkbox>
        </u-checkbox-group>
      </u-form-item>
      <u-form-item prop="dailyConsumption.dailySpentMoney" borderBottom>
        <view class="title">每月家庭日常生活消费支出：</view>
        <u-radio-group v-model="form.dailyConsumption.dailySpentMoney" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in radioGroupList.dailySpentMoney_list"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="dailyConsumption.endowmentInsuranceCost" label="养老保险：" borderBottom label-width="80">
        <u-input v-model="form.dailyConsumption.endowmentInsuranceCost" border="none" placeholder="请输入金额"></u-input>
      </u-form-item>
      <u-form-item prop="dailyConsumption.dailySpentMoney" borderBottom>
        <view class="title">家庭每月食品支出占比：</view>
        <u-radio-group v-model="form.dailyConsumption.foodExpenditurePoint" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in radioGroupList.foodExpenditurePoint_list"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="dailyConsumption.mortgageSpending" label="房贷支出：" borderBottom label-width="80">
        <u-input v-model="form.dailyConsumption.mortgageSpending" border="none" placeholder="请输入金额"></u-input>
      </u-form-item>
      <u-form-item prop="dailyConsumption.rentalFee" label="租房费用：" borderBottom label-width="80">
        <u-input v-model="form.dailyConsumption.rentalFee" border="none" placeholder="请输入金额"></u-input>
      </u-form-item>
      <u-form-item prop="dailyConsumption.dailySpentMoney" borderBottom>
        <view class="title">家庭每月通信费用：</view>
        <u-radio-group v-model="form.dailyConsumption.communicationCosts" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in radioGroupList.communicationCosts_list"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>

      <Sign>4-2.家庭必要刚性支出</Sign>
      <u-form-item
        :prop="`necessaryExpenses.${key}`"
        :label="`${formMap.necessaryExpenses[key]}：`"
        borderBottom
        label-width="130"
        v-for="(item, key) in form.necessaryExpenses"
        :key="key"
      >
        <u-input v-model="form.necessaryExpenses[key]" border="none" placeholder="元"></u-input>
      </u-form-item>

      <Sign>4-3.社会交往支出</Sign>
      <u-form-item
        :prop="`socialExpenditure.${key}`"
        :label="`${formMap.socialExpenditure[key]}：`"
        borderBottom
        label-width="120"
        v-for="(item, key) in form.socialExpenditure"
        :key="key"
      >
        <u-input v-model="form.socialExpenditure[key]" border="none" placeholder="次/元"></u-input>
      </u-form-item>

      <Sign>4-3.突发性支出</Sign>
      <u-form-item prop="suddenExpenditure.emergentEvent" borderBottom>
        <view class="title">近一年遭遇非疾病突发性事件：</view>
        <u-radio-group v-model="form.suddenExpenditure.emergentEvent" placement="column">
          <u-radio
            :customStyle="{ marginBottom: '40rpx' }"
            v-for="(item, index) in radioGroupList.emergentEvent_list"
            :key="index"
            :label="item.name"
            :name="item.name"
          ></u-radio>
        </u-radio-group>
      </u-form-item>
      <u-form-item prop="suddenExpenditure.emergentEventMoney" label="突发性事件费用支出：" borderBottom label-width="180">
        <u-input v-model="form.suddenExpenditure.emergentEventMoney" border="none" placeholder="请输入金额"></u-input>
      </u-form-item>
    </u-form>
  </view>
</template>

<script>
export default {
  props: {},
  data: () => ({
    form: {
      dailyConsumption: {
        spendProject: [],
        dailySpentMoney: "1000元以下",
        endowmentInsuranceCost: "0",
        foodExpenditurePoint: "30%",
        mortgageSpending: "0",
        rentalFee: "0",
        communicationCosts: "50元以下",
      },
      necessaryExpenses: {
        educationNumber: "0",
        educationOutCome: "0",
        tuition: "0",
        accommodation: "0",
        bookMoney: "0",
        livingExpenses: "0",
        bigHealthSpending: "0",
        bigPersonMoney: "0",
        slowHealthSpending: "0",
        slowPersonMoney: "0",
        treatmentDisabledMoney: "0",
        employmentMoney: "0",
      },
      socialExpenditure: {
        contactNumber: "0",
        contactMoney: "0",
        contactArrevgeMoney: "0",
      },
      suddenExpenditure: {
        emergentEvent: "自然灾害",
        emergentEventMoney: "0",
      },
    },
    formMap: {
      dailyConsumption: {
        spendProject: "支出项目",
        dailySpentMoney: "支出金额",
        endowmentInsuranceCost: "养老保险",
        foodExpenditurePoint: "食品支出占比",
        mortgageSpending: "房贷支出",
        rentalFee: "租房费用",
        communicationCosts: "通信费用",
      },
      necessaryExpenses: {
        educationNumber: "教育人数",
        educationOutCome: "教育开销",
        tuition: "学费",
        accommodation: "住宿费",
        bookMoney: "书本费",
        livingExpenses: "生活费",
        bigHealthSpending: "重大医疗支出",
        bigPersonMoney: "重大个人负担",
        slowHealthSpending: "慢性医疗支出",
        slowPersonMoney: "慢性疾病个人负担",
        treatmentDisabledMoney: "治疗/康复残疾费用",
        employmentMoney: "就业支出",
      },
      socialExpenditure: {
        contactNumber: "往来次数",
        contactMoney: "往来支出",
        contactArrevgeMoney: "平均往来支出",
      },
      suddenExpenditure: {
        emergentEvent: "突发性事件",
        emergentEventMoney: "突发性事件费用支出",
      },
    },
    radioGroupList: {
      spendProject_list: [
        { name: "子女教育" },
        { name: "建房、还房贷" },
        { name: "购买农业生产资料" },
        { name: "家庭日常消费支出" },
        { name: "其他" },
      ],
      dailySpentMoney_list: [
        { name: "1000元以下" },
        { name: "1000~2000元" },
        { name: "2000~3000元" },
        { name: "3000~4000元" },
        { name: "4000~5000元" },
        { name: "5000元以上" },
      ],
      foodExpenditurePoint_list: [{ name: "30%" }, { name: "30%~40%" }, { name: "40%~50%" }, { name: "50%以上" }],
      communicationCosts_list: [{ name: "50元以下" }, { name: "50~100元" }, { name: "100~200元" }, { name: "200元以上" }],
      emergentEvent_list: [
        { name: "自然灾害" },
        { name: "公共卫生事件" },
        { name: "突发重大疾病" },
        { name: "交通事故" },
        { name: "其他意外事故" },
      ],
    },
    rules: [],
  }),
  computed: {},
  methods: {},
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {},
}
</script>

<style lang="scss" scoped>
.form-container {
  box-sizing: border-box;
  padding: 20rpx;
  border-radius: 20rpx;
  background-color: #fff;

  .title {
    font-size: 32rpx;
    color: $uni-color-paragraph;
    font-weight: bold;
    margin-bottom: 40rpx;
  }
}
</style>
